<template>
    <view class="group_detail">
        <rich-text type="text" :nodes="title"></rich-text>
        <template v-if="state.groupStatus === 1 && state.activityStatus === 3">
            <view class="desc">距拼单结束还有</view>
            <view class="countdown_time">
                <uni-countdown
                    :font-size="14"
                    :show-day="false"
                    :hour="getTime.h"
                    :minute="getTime.m"
                    :second="getTime.s"
                    color="#FFFFFF"
                    background-color="#E40002" />
            </view>
        </template>
        <view :class="['group_detail_info', state.totalNum < 5 ? 'info_flex' : '']">
            <view class="group_detail_info_item" v-for="(it, i) in state.totalNum" :key="`k${i}`">
                <view :class="['group_detail_info_item_avatar', getAvatar(state.offered[i]) ? 'item_avatar_bdn' : '']">
                    <image :src="getAvatar(state.offered[i])" />
                </view>
                <view class="group_detail_info_item_name">{{ getNicknam(state.offered[i]) }}</view>
            </view>
        </view>
        <button v-if="state.btnShow.includes(1)" class="group_btn" @click="toHome">进店逛逛</button>
        <button v-if="state.btnShow.includes(2)" class="group_btn" @click="onOpenGroup(1)">立即参团</button>
        <button v-if="state.btnShow.includes(3)" class="group_btn two" @click="onOpenGroup(2)">立即开团</button>
        <button v-if="state.btnShow.includes(4)" open-type="share" class="group_btn">邀请好友参团</button>
        <button v-if="state.btnShow.includes(5)" class="group_btn two" @click="toOrderDetail">查看订单详情</button>
    </view>
</template>

<script setup>
import router from '@/router';
import { getImgOssUrl } from '@/commons/utils';
import { ref, computed, reactive } from 'vue';

const state = reactive({
    data: {},
    btnShow: [],
    from: '',
    totalNum: 0,
    offered: [],
    groupStatus: 0,
    activityStatus: 0
});
const emit = defineEmits(['openSkupop']);

const surplusTime = computed(() => {
    let nowTime = new Date().getTime() / 1000;
    let groupEndTime = state.activityStartTime + state.surplusTime;
    return groupEndTime < state.activityEndTime ? groupEndTime - nowTime : state.activityEndTime - nowTime;
});

// 剩余时间
const getTime = computed(() => {
    const h = parseInt(surplusTime.value / 60 / 60);
    const m = parseInt((surplusTime.value / 60 / 60 - h) * 60);
    const s = parseInt(((surplusTime.value / 60 / 60 - h) * 60 - m) * 60);
    return { h, m, s };
});

// 获取头像
const getAvatar = item => {
    if (item) {
        return item.avatar || getImgOssUrl('/ui-prod-2.7.0/avatar.png');
    } else if (state.groupStatus === 2) {
        return getImgOssUrl('/ui-prod-2.7.0/avatar.png');
    }
    return '';
};
// 获取名称
const getNicknam = item => {
    if (item) {
        return item.nickname || '匿名';
    } else if (state.groupStatus === 2) {
        return '匿名';
    }
    return '';
};

// 还差人数
const remaininNum = computed(() => {
    return state.totalNum - state.offered.length || 0;
});
const title = ref('');
const getTitle = () => {
    if (state.activityStatus === 2) {
        switch (state.groupStatus) {
            case 1:
                title.value = `<div style="margin-bottom:16px;font-size:20px;font-weight: 500;">还差<span style="color:red">${remaininNum.value}</span>人即可拼团成功！</div>`;
                if (state.from === 'card') {
                    state.btnShow = [2];
                } else {
                    state.btnShow = [4, 5];
                }
                break;
            case 2:
                title.value = `<div style="margin-bottom:16px;font-size:20px;font-weight: 500;">${
                    state.from === 'card' ? '你来晚了，该团已满' : '恭喜你，拼团成功'
                }</div>`;
                if (state.from === 'card') {
                    state.btnShow = [1, 3];
                } else {
                    state.btnShow = [1, 5];
                }
                break;
            case 3:
                title.value = `<div style="margin-bottom:16px;font-size:20px;font-weight: 500;">${
                    state.from === 'card' ? '你来晚了，该团已失效' : '超时未成团，拼团失败！'
                }</div>`;
                if (state.from === 'card') {
                    state.btnShow = [1, 3];
                } else {
                    state.btnShow = [1, 5];
                }
                break;
        }
    } else {
        if (state.from === 'card') {
            title.value = `<div style="margin-bottom:16px;font-size:20px;font-weight: 500;">该活动已结束</div>`;
            state.btnShow = [1];
        } else {
            switch (state.groupStatus) {
                case 2:
                    title.value = `<div style="margin-bottom:16px;font-size:20px;font-weight: 500;">恭喜你，拼团成功</div>`;
                    state.btnShow = [1, 5];
                    break;
                case 3:
                    title.value = `<div style="margin-bottom:16px;font-size:20px;font-weight: 500;">超时未成团，拼团失败！</div>`;
                    state.btnShow = [1, 5];
                    break;
            }
        }
    }
};
// 查看订单详情
const toOrderDetail = () => {
    router.push({
        path: '/pages-user/orderdetail/index',
        query: {
            orderId: state.orderId
        }
    });
};
// 进店逛逛
const toHome = () => {
    router.switchTab({ url: '/pages/tabbar/home' });
};
// 立即开团
const onOpenGroup = type => {
    emit('openSkupop', type);
};
const onProps = res => {
    Object.assign(state, res);
    getTitle();
};
defineExpose({
    onProps
});
</script>

<style lang="scss" scoped>
.group_detail {
    margin-top: 20rpx;
    padding: 60rpx 32rpx 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    .title {
        margin-bottom: 60rpx;
        font-size: 40rpx;
        font-weight: 500;
        color: #333333;
        letter-spacing: 2px;
    }
    .desc {
        margin-bottom: 20rpx;
        font-size: 28rpx;
        color: #999999;
    }
    .countdown_time {
        margin-bottom: 40rpx;
    }

    .group_detail_info {
        padding: 0 16rpx;
        margin-bottom: 60rpx;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-gap: 20rpx;

        .group_detail_info_item {
            display: flex;
            flex-direction: column;
            align-items: center;
            &:nth-child(5n) {
                margin-right: 0;
            }
            .group_detail_info_item_avatar {
                width: 100rpx;
                height: 100rpx;
                border-radius: 50%;
                margin-bottom: 20rpx;
                border: 2rpx dashed #e2e2e2;
                background: url('/static/marker/doubt.png') no-repeat center center / 40% 40%;
                line-height: 100rpx;
                color: e2e2e2;
                text-align: center;
                image {
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                }
            }
            .item_avatar_bdn {
                border: 2rpx dashed transparent;
            }
            .group_detail_info_item_name {
                width: 100rpx;
                font-size: 22rpx;
                text-align: center;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
                word-break: break-all;
                color: #333333;
            }
        }
    }
    .info_flex {
        display: flex;
    }
    .group_btn {
        width: 100%;
        height: 88rpx;
        margin-bottom: 40rpx;
        background: linear-gradient(270deg, #ff5356 0%, #fe292b 100%);
        border-radius: 44rpx;
        line-height: 88rpx;
        text-align: center;
        color: #fff;
    }
    .two {
        background: #fff;
        border: 1px solid #cccccc;
        color: #666666;
    }
}
</style>
